<template>
  <div class="table-box-body">
    <table width="100%" border="1">
      <tr>
        <td rowspan="2" class="td-time">陪餐日期</td>
        <td rowspan="2">类型</td>
        <td rowspan="2">班级</td>
        <td rowspan="2">人员</td>
        <td colspan="3">厨房卫生环境</td>
        <td colspan="5">从业人员工作情况</td>
        <td rowspan="2">食谱名称</td>
        <td rowspan="2">{{styleType==2?'陪餐':'试餐'}}时间</td>
        <!-- <td rowspan="2">陪餐时间</td> -->
        <td colspan="8">陪餐观察记录</td>
        <td rowspan="2">签字</td>
        <td rowspan="2">本周情况描述</td>
      </tr>
      <tr>
        <td style="width: 60px" class="td-01">环境整洁、卫生</td>
        <td class="td-02">工具、容器等分类、分区、分色整理，使用</td>
        <td>存在问题</td>
        <td class="td-40">身体健康</td>
        <td class="td-50">个人卫生良好</td>
        <td class="td-40">穿戴整齐</td>
        <td class="td-40">操作规范</td>
        <td>存在问题</td>

        <td class="td-40">合理搭配</td>
        <td class="td-40">营养均衡</td>
        <td style="width: 70px">口感、观感、温度</td>
        <td style="width: 60px">幼儿就餐秩序</td>
        <td style="width: 120px">教师关注幼儿进餐情况并给与适时指导</td>
        <td>其他</td>
        <td>亮点</td>
        <td>意见建议</td>
      </tr>
      <template v-for="item in 5">
        <template v-if="foodDay[item-1]">
          <!--            第一行 item_tr 1 2 3-->
          <tr v-for="item_tr in dish_type.length" :key="`${item}${item_tr}`">
            <template v-if="foodDay[item - 1].list[item_tr-1]">
              <td :rowspan="dish_type.length" v-if="item_tr==1">
                {{ foodDay[item - 1].time }}
                {{ weekName[foodDay[item - 1].weekName] }}
              </td>
              <!--              配餐类型-->
              <td>{{ foodType[item_tr] }}</td>
              <!--                21-->
              <td v-for="item_td in 2" :key="`class${item}${item_tr}${item_td}`">
                    <span v-if="item_td==1">{{
                        foodDay[item - 1].list[item_tr - 1].classes ? foodDay[item - 1].list[item_tr - 1].classes.class_name : '--'
                      }}</span>
                <!--                <span v-if="item_td==2">{{-->
                <!--                    foodDay[item - 1].list[item_tr - 1].user ? foodDay[item - 1].list[item_tr - 1].user.realname : '&#45;&#45;'-->
                <!--                  }}</span>-->
                <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" v-if="item_td==2">
                  <div class="avatar-wrapper">
                    <div class="realname-box" v-if="foodDay[item - 1].list[item_tr - 1].user_id">
                      <span class="morelink" v-for="item in foodDay[item - 1].list[item_tr - 1].user_id">{{item.realname}}</span>
                    </div>
                    <i class="el-icon-caret-bottom"/>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="detelFood(foodDay[item - 1].list[item_tr - 1])">
                      <span>删除记录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </td>
              <!--                卫生-->
              <td v-for="item_td in 3" :key="`hygiene${item}${item_tr}${item_td}`">
                <!--                  从业人员 hygiene  卫生 observe_log 观察记录 work-->
                <!--                  desc: 2-->
                <!--                  id: 4-->
                <!--                  is_check: 1-->
                <!--                  name: "身体健康"-->
                <!--                  type: 2-->
                <!--                    is_check 1勾选类型 0 输入框类型，勾选类型1 desc 1 需要改善 2 完全做到 -->
                <span v-if="foodDay[item - 1].list[item_tr-1].observe_log[item_td-1].is_check">
                    <em v-if="foodDay[item - 1].list[item_tr-1].observe_log[item_td-1].desc == 2">✓</em>
                    <em v-else>◯</em>
                  </span>
                <span v-else>{{ foodDay[item - 1].list[item_tr - 1].observe_log[item_td - 1].desc }}</span>
              </td>
              <!--                从业人员-->
              <td v-for="item_td in 5" :key="`observe_log${item}${item_tr}${item_td}`">
                  <span v-if="foodDay[item - 1].list[item_tr-1].hygiene[item_td-1].is_check">
                    <em v-if="foodDay[item - 1].list[item_tr-1].hygiene[item_td-1].desc == 2">✓</em>
                    <em v-else>◯</em>
                  </span>
                <span v-else>{{ foodDay[item - 1].list[item_tr - 1].hygiene[item_td - 1].desc }}</span>
              </td>
              <td v-for="item_td in 2" :key="`name${item}${item_tr}${item_td}`">
                  <span v-if="item_td==1"><i
                    v-for="item in foodDay[item - 1].list[item_tr-1].release_dish_ids">{{ item.name }},</i></span>
                  <!-- <span
                    v-if="item_td==2" @click="editTime(foodDay[item - 1].list[item_tr - 1])" class="timeLine">
                    {{
                      foodDay[item - 1].list[item_tr - 1].create_time
                    }}
                  </span> -->
                  <span
                    v-if="item_td==2" @click="editTime(foodDay[item - 1].list[item_tr - 1])" class="timeLine">
                    {{
                      foodDay[item - 1].list[item_tr - 1].eat_time ? foodDay[item - 1].list[item_tr - 1].eat_time + '/' : ''
                    }}{{
                      foodDay[item - 1].list[item_tr - 1].create_time
                    }}
                  </span>
              </td>
              <!--                观察记录-->
              <td v-for="item_td in 8" :key="`work${item}${item_tr}${item_td}`">
                  <span v-if="foodDay[item - 1].list[item_tr-1].work[item_td-1].is_check">
                    <em v-if="foodDay[item - 1].list[item_tr-1].work[item_td-1].desc == 2">✓</em>
                    <em v-else>◯</em>
                  </span>
                <span v-else>{{ foodDay[item - 1].list[item_tr - 1].work[item_td - 1].desc }}</span>
              </td>
              <td>
                <el-image
                  v-if="foodDay[item - 1].list[item_tr - 1].sign"
                  :src="`${foodDay[item - 1].list[item_tr - 1].sign}`"
                  fit="contain"
                  class="imgsign"
                  :preview-src-list="[foodDay[item - 1].list[item_tr - 1].sign]"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </td>
              <td :rowspan="dish_type.length*5" v-if="item==1 && item_tr==1">
                {{ weekContent }}
                <el-button size="mini" @click="showWeekFn" v-if="!weekContent">编辑</el-button>
              </td>
            </template>
            <template v-else>
              <td :rowspan="dish_type.length" v-if="item_tr==1 && foodDay[item - 1].dayTimeState">
                {{ item_tr }}
                {{ foodDay[item - 1].time }}
                {{ weekName[foodDay[item - 1].weekName] }}
              </td>
              <td :rowspan="dish_type.length" v-if="item_tr==1 && !foodDay[item - 1].dayTimeState">
              </td>
              <td>{{ foodType[item_tr] }}</td>
              <td v-for="item_td in 20" :key="`tr${item}${item_tr}${item_td}`"></td>
              <td>
              </td>
              <td :rowspan="dish_type.length*5" v-if="item==1&&item_tr==1">
                {{ weekContent }}
                <el-button size="mini" @click="showWeekFn" v-if="!weekContent">编辑</el-button>
              </td>
            </template>
          </tr>
        </template>
        <template v-else>
          <!--            第一行-->
          <tr v-for="item_tr in dish_type.length" :key="`${item}${item_tr}`">
            <td :rowspan="dish_type.length" v-if="item_tr==1"></td>
            <td>{{ foodType[item_tr] }}</td>
            <td v-for="item_td in 20" :key="`tr${item}${item_tr}${item_td}`"></td>
            <td></td>
            <td :rowspan="dish_type.length*5" v-if="item==1&&item_tr==1">
              {{ weekContent }}
              <el-button size="mini" @click="showWeekFn" v-if="!weekContent">编辑</el-button>
            </td>
          </tr>
        </template>
      </template>
    </table>
    <div class="tips-day-list">备注：完全做到（✓），存在问题（◯）并填写意见建议</div>
    <editEatTime :visible.sync="timeStatus" :foodOption="foodOption" @initHome="initHome"></editEatTime>
  </div>
</template>

<script>
import editEatTime from "./editEatTime"

export default {
  props: ['styleType','foodDay', 'foodType', 'weekName', 'weekContent', 'dish_type'],
  name: "weekTable",
  components: {editEatTime},
  data() {
    return {
      timeStatus: false,
      foodOption: null,
      styleStatus: 2
    }
  },
  watch:{
  },
  mounted() {
    // 在组件挂载后打印 foodDay
    console.log('foodDay:', this.foodDay);
  },
  methods: {
    showWeekFn() {
      this.$emit('showWeekFn')
    },
    initHome() {
      this.$emit('getIndexFn')
    },
    editTime(option) {
      this.foodOption = option
      this.timeStatus = true
    },
    detelFood(option) {
      this.$emit('dishdelete', option)
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

table td em {
  font-style: normal;
  font-size: 16px;
}

table td i {
  font-style: normal;
  font-size: 12px;
}

.table-title {
  margin-bottom: 10px;
}

.table-title span {
  font-weight: bold;
}

.td-01 {
  width: 80px;
}

.td-02 {
  width: 133px;
}

.td-40 {
  width: 40px
}

.td-50 {
  width: 50px
}

.tips-day-list {
  padding: 10px 0 20px;
  text-align: center;
}

.td-time {
  width: 80px
}

.timeLine {
  cursor: pointer;
}

.timeLine:hover {
  font-weight: bold;
  color: #006dcd;
  /*text-decoration: underline;*/
}

.avatar-wrapper {
  cursor: pointer;
}
.realname-box{
  display: flex;
  flex-direction: column;
}
.realname-box span{
  display: block;
  width: 50px;
  font-size: 12px;
}
.imgsign{
  width:90px;
  height:90px;
  border: 1px solid #ddd;
}
</style>
